{$layout}
{$template "/proxy/menu"}

{$if gt (len .locationId) 0}
	{$template "/proxy/locations/menu"}
{$end}

<h3>添加重写规则</h3>

<form  class="ui form" data-tea-action="/proxy/rewrite/add" data-tea-success="addSuccess" id="rewrite-form">
    <input type="hidden" name="serverId" :value="server.id"/>
    <input type="hidden" name="locationId" :value="locationId"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">匹配规则</td>
            <td>
                <input type="text" name="pattern" maxlength="1024" placeholder="比如 /hello/(.+)"/>
                <p class="comment">需要符合正则表达式规范，<a href="http://teaos.cn/doc/regexp/Regexp.md" target="_blank">正则表达式语法 &raquo;</a></p>
            </td>
        </tr>
        <tr>
            <td>目标类型</td>
            <td>
                <select class="ui dropdown" name="targetType" v-model="targetType" style="width:12em">
                    <option value="url">转发到URL</option>
                    <option value="proxy">转发到其他代理服务</option>
                </select>
            </td>
        </tr>
        <tr v-if="targetType == 'proxy'">
            <td>转发到代理服务</td>
            <td>
                <a class="disabled" v-if="proxies.length == 0">还没有可用的代理服务。</a>
                <select class="ui dropdown" name="proxyId" v-model="proxyId" style="width:14em">
                    <option value="">[请选择]</option>
                    <option v-for="otherProxy in proxies" :value="otherProxy.id">{{otherProxy.name}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>目标URL</td>
            <td>
                <input type="text" name="replace" maxlength="1024" placeholder="比如 /hello/${1}.html"/>
                <p class="comment">URL中可以包含一些<a href="http://teaos.cn/doc/proxy/Variables.md" target="_blank">内置的变量</a>，也可以是一个完整的URL，比如：http://example.com/hello。</p>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <a href="" v-if="!advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">更多选项 <i class="icon down angle"></i> </a>
                <a href="" v-if="advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">收起选项 <i class="icon up angle"></i> </a>
            </td>
        </tr>
        <tbody v-show="advancedOptionsVisible">
            <tr v-if="targetType == 'url'">
                <td>转发方式</td>
                <td>
                    <select class="ui dropdown" name="redirectMode" v-model="redirectMode" style="width:12em">
                        <option value="r">跳转</option>
                        <option value="p">代理</option>
                    </select>
                    <p class="comment" v-if="redirectMode == 'r'">通过<span class="ui label tiny">307 Temporary Redirect</span>在客户端（比如浏览器）跳转到目标URL。</p>
                    <p class="comment" v-if="redirectMode == 'p'">将目标URL隐藏于客户端。</p>
                </td>
            </tr>
            <tr>
                <td>匹配条件</td>
                <td>
                   	<request-cond-box prefix="request" :variables="variables" :operators="operators"></request-cond-box>
                    <p class="comment">满足以上条件时重写规则才会生效。参数中可以使用一些内置的变量：<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">点击这里查看</a>，比如${arg.name}表示名为name的参数值</p>
                </td>
            </tr>
			<tr>
				<td>是否终止往下匹配</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="isBreak" value="1"/>
						<label></label>
					</div>
					<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的重写规则或路径规则。</p>
				</td>
			</tr>
			<tr v-if="redirectMode == 'r'">
				<td>是否持久重定向</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="isPermanent" value="1"/>
						<label></label>
					</div>
					<p class="comment">是否开启<span class="ui label tiny">301 Moved Permanently</span>跳转</p>
				</td>
			</tr>
			<tr v-if="redirectMode == 'p'">
				<td>代理主机名<em>（Host）</em></td>
				<td>
					<input type="text" name="proxyHost" v-model="proxyHost" placeholder="比如 teaos.cn" maxlength="100" @input="changeProxyHost"/>
					<p class="comment"><span class="red" v-if="proxyHostError.length > 0">{{proxyHostError}}</span>请求被代理的URL使用的Host，用于修改被代理服务接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持<a href="http://teaos.cn/doc/proxy/Variables.md#%E8%AF%B7%E6%B1%82%E7%9B%B8%E5%85%B3%E5%8F%98%E9%87%8F" target="_blank">请求变量</a>。</p>
				</td>
			</tr>
            <tr>
                <td>是否启用</td>
                <td>
                    <div class="ui checkbox">
                        <input type="checkbox" name="on" value="1" checked="checked"/>
                        <label></label>
                    </div>
                </td>
            </tr>
        </tbody>
		<tbody>
			<tr>
				<td colspan="2">
					<a href="" v-if="!testingVisible" @click.prevent="showTesting()" style="font-weight:normal">匹配测试 <i class="icon down angle"></i> </a>
					<a href="" v-if="testingVisible" @click.prevent="showTesting()" style="font-weight:normal">收起匹配测试 <i class="icon up angle"></i> </a>
				</td>
			</tr>
		</tbody>
		<tbody v-show="testingVisible">
			<tr>
				<td>测试路径</td>
				<td>
					<input type="text" name="testingPath" placeholder="要测试的路径，可以是一个完整的URL"/>
					<p class="comment"><a href="" @click.prevent="testSubmit()">提交测试</a> &nbsp;  <span class="green" v-if="testingFinished && testingSuccess">匹配成功</span>
						<span v-if="testingSuccess && testingMapping != null" v-for="(v, k) in testingMapping" class="ui label tiny">${<em>{{k}}</em>}:{{v}}</span>
						<span v-if="testingSuccess">重写后URL：{{testingReplace}}</span>
						<span class="red" v-if="testingFinished && !testingSuccess">匹配失败 {{testingError}}</span></p>
				</td>
			</tr>
		</tbody>
    </table>
    <button class="ui button primary" type="submit">保存</button> &nbsp; <a :href="from">返回</a>
</form>